<template>
  <div class="repair">
    <div class="screen_box">
      <div class="select_box">
        <div class="select_li">
          <el-select v-model="statusData" placeholder="请选择" size="mini" @change="selectStatus">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li">
          <el-select v-model="yearData" placeholder="请选择" size="mini" @change="selectYear">
            <el-option v-for="item in yearOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search_box">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="goAdd" v-if="firstType === '0'">
          物品维修申报
        </el-button>
      </div>
    </div>
    <div class="list_con" v-if="listData.length > 0">
      <div class="infor_left">
        <el-scrollbar class="info_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="{ is_select: activeInfo.id === item.id }"
              @click="lookOne(item)"
              v-for="item in listData"
              :key="item.id">
              <div class="one_con">
                <div class="info_text">{{ item.repairTitle }} [{{ item.orgName }}-{{ item.userName }}]</div>
              </div>
              <div class="one_con con_bottom">
                <div class="info_time">{{ item.createTime }}</div>
                <div class="info_status">{{ item.status | formStatus }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-pagination
          background
          layout="pager,total"
          :current-page="pagenation.currentPage"
          :page-size="pagenation.pageSize"
          :total="pagenation.totalSize"
          @current-change="onPageChange"
          hide-on-single-page
          :pager-count="5"></el-pagination>
      </div>

      <div class="infor_right">
        <list-detail
          :firstType="firstType"
          :userType="userType"
          :activeInfo="activeInfo"
          @addSuccess="addSuccess"
          ref="listDetail"></list-detail>
      </div>
    </div>
    <div class="list_con" v-else>
      <div class="full_no">暂无申请数据</div>
    </div>
    <!-- 新建 start -->
    <XnDialog
      title="物品维修、更换申请单"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      class="branch_dialog"
      @closed="inforDiaShow = false">
      <repairAdd v-if="inforDiaShow" @addSuccess="addSuccess" @cancelData="cancelData" />
    </XnDialog>
    <!-- 新建 end -->
  </div>
</template>

<script>
import { getlistRepairApplys, getlistRepairConfirm } from '@apis/api-dailyManage.js'
import listDetail from './listDetail'
import repairAdd from './repairAdd.vue'
import moment from 'moment'
import XnDialog from '@com/xnDialog.vue'
import { selectYearFun } from '@utility/utility.js'
export default {
  name: 'repairList',
  components: { listDetail, repairAdd, XnDialog },
  props: {
    userType: {
      type: String,
      default: '',
    },
    firstType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      load: true,
      activeInfo: {},
      statusOptions: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '0',
          label: '待审批',
        },
        {
          value: '1',
          label: '审批通过',
        },
        {
          value: '2',
          label: '审批不通过',
        },
      ],
      statusData: '',
      yearOption: [
        {
          value: '2023',
          label: '2023年',
        },
        {
          value: '2024',
          label: '2024年',
        },
      ],
      yearData: moment().format('YYYY'),
      pagenation: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      inforDiaShow: false,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      pageList: [],
      checkList: [],
      listData: [],
      selectYearFun,
    }
  },
  computed: {},
  filters: {
    formStatus(val) {
      switch (val) {
        case '0':
          return '待审批'
        case '1':
          return '审批通过'
        case '2':
          return '审批不通过'

        default:
          break
      }
    },
  },
  watch: {
    firstType(news) {
      this.pagenation.currentPage = 1
      this.getData()
    },
    pageList: {
      handler(news) {
        this.listData = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.yearOption = this.selectYearFun(2023)
    this.getData('1')
  },
  mounted() {},
  methods: {
    getData(type) {
      if (this.userType === '1' || this.firstType === '0') {
        this.getlistRepairApplys(type)
      } else {
        this.getlistRepairConfirm(type)
      }
    },
    selectYear() {
      this.pagenation.currentPage = 1
      this.getData()
    },
    selectStatus() {
      this.pagenation.currentPage = 1
      this.getData()
    },
    lookOne(item) {
      this.activeInfo = item
    },
    onPageChange(e) {
      this.pagenation.currentPage = e
      this.getData()
    },
    addSuccess(data) {
      this.inforDiaShow = false
      if (data === 'add') {
        this.pagenation.currentPage = 1
      }
      if (this.firstType === '0') {
        this.getlistRepairApplys()
      } else {
        this.getlistRepairConfirm()
      }
    },
    cancelData() {
      this.inforDiaShow = false
    },
    goAdd() {
      this.inforDiaShow = true
    },
    getlistRepairApplys() {
      const param = {
        id: '',
        month: '',
        repairYear: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.userInfo.loginPostInfo.orgId,
        status: this.statusData,
        tenantId: localStorage.pskh_tenantId,
      }
      getlistRepairApplys(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.totalSize = res.data.total
          this.activeInfo = res.data.records[0]
        }
      })
    },
    operate() {
      if (this.pageList.length === 1 && this.pagenation.currentPage > 1) {
        this.pagenation.currentPage--
      }
      this.getlistRepairApplys()
    },
    getlistRepairConfirm(type) {
      const param = {
        id: type === '1' ? this.$route.query.id : '',
        repairYear: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.userInfo.loginPostInfo.orgId,
        status: this.statusData,
        userId: this.userInfo.userId,
        tenantId: localStorage.pskh_tenantId,
      }
      getlistRepairConfirm(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.totalSize = res.data.total
          if (this.$route.query.id && type === '1') {
            this.pagenation.currentPage = res.data.current
            const id = this.$route.query.id
            const arr = this.pageList.filter(item => {
              return item.id === id
            })
            this.activeInfo = arr[0]
            this.clearUrl()
          } else {
            let arr1 = []
            if (this.activeInfo && this.activeInfo.id) {
              const arr = this.pageList.filter(item => {
                return item.id === this.activeInfo.id
              })
              if (arr.length) {
                arr1 = arr
              }
            }
            if (arr1.length) {
              this.activeInfo = arr1[0]
            } else {
              this.activeInfo = res.data.records[0]
            }
          }
        }
      })
    },
    clearUrl() {
      const url = window.location.href
      const urlArr = url.split('?')
      window.history.replaceState(null, null, urlArr[0])
      this.$route.query.id = ''
      this.$route.query.flag = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.repair {
  height: 100%;
  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid #efefef;
    // box-shadow: 0 3px 5px 0 rgba(2, 2, 2, 0.1);
    .select_box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
          width: 150px;
        }
      }
    }
  }
  .list_con {
    height: calc(100% - 50px);
    display: flex;
    margin-top: 2px;
    .infor_left {
      height: calc(100% - 20px);
      width: 300px;
      margin: 10px;
      border: 1px solid #e5e5e5;
      .info_left {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
      .left_con_list {
        margin: 10px 0;
        padding: 0 10px;
        .infor_left_one {
          padding: 5px 8px;
          cursor: pointer;
          margin-bottom: 10px;
          background-color: #f9f9f9;
          .one_con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
            .info_text {
              font-size: 15px;
              .temp {
                color: #7497c8;
              }
              /deep/.el-checkbox__label {
                white-space: pre-wrap;
              }
            }
            .info_status {
              color: #f59a23;
              padding-left: 10px;
              white-space: nowrap;
            }
            .info_org {
              background-color: #fdeed7;
              border-radius: 4px;
              padding: 2px 6px;
              font-size: 14px;
              color: #86642c;
              word-break: keep-all;
            }
          }
          .con_bottom {
            margin-top: 20px;
          }
        }
        .is_select {
          background-color: #e4ebf0;
        }
      }
    }
    .el-pagination {
      text-align: right;
      margin-top: 10px;
    }
    .infor_right {
      height: calc(100% - 20px);
      width: calc(100% - 300px);
      margin: 10px 0;
      border: 1px solid #e5e5e5;
    }
    .full_no {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
    }
  }
  .branch_dialog {
    /deep/.el-dialog {
      padding-bottom: 20px;
    }
    /deep/.el-dialog__body {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
</style>
